<template>
  <el-dialog
    :visible.sync="visible"
    :title="!dataForm.id ? $t('add') : $t('update')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="票价名称" prop="ticketName">
            <el-input
              v-model="dataForm.ticketName"
              placeholder="票价名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门票Id" prop="menpiaoId">
            <el-input
              :disabled="dataForm.id?true:false"
              v-model="dataForm.menpiaoId"
              placeholder="门票Id"
            ></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="渠道" prop="qudaoCode">
            <el-input
              v-model="dataForm.qudaoCode"
              placeholder="渠道"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密钥sk" prop="secretKey">
            <el-input
              v-model="dataForm.secretKey"
              placeholder="密钥sk"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="所属区域" prop="sid">
            <el-select
              v-model="dataForm.sid"
              style="width: 100%"
              placeholder="所属区域"
              clearable
              @change="
                (val) => {
                  this.getScenicPortOptions(val);
                }
              "
            >
              <el-option
                v-for="item in scenicOptions"
                :key="item.id"
                :label="item.scenicName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="景区" prop="spid">
            <el-select
              v-model="dataForm.spid"
              style="width: 100%"
              placeholder="景区"
              clearable
            >
              <el-option
                v-for="item in scenicSpotOptions"
                :key="item.spid"
                :label="item.scenicName"
                :value="item.spid"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="门票类型" prop="ticketType">
            <el-select
              :disabled="!dataForm.id ? false : true"
              v-model="dataForm.ticketType"
              style="width: 100%"
              placeholder="门票类型"
              clearable
            >
              <el-option
                v-for="item in ticketTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="起步价" prop="realPrice">
            <el-input-number
              v-model="dataForm.realPrice"
              style="width: 100%"
              controls-position="right"
              placeholder="起步价"
            ></el-input-number>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="价格设置" prop="calendarList"> </el-form-item>
        </el-col>
        <el-col
          :span="24"
          style="margin-top: -65px; position: relative; z-index: 11"
        >
          <div
            class="pricesItem"
            v-for="(item, index) in dataForm.calendarList"
            :key="index"
          >
            <el-date-picker
              class="s1"
              value-format="yyyy-MM-dd"
              v-model="item.startDate"
              type="date"
              placeholder="开始日期"
            >
            </el-date-picker>
            <el-date-picker
              class="s1"
              value-format="yyyy-MM-dd"
              v-model="item.endDate"
              type="date"
              placeholder="结束日期"
            >
            </el-date-picker>
            <el-input-number
              class="s1"
              v-model="item.price"
              controls-position="right"
              placeholder="价格"
            ></el-input-number>
            <span class="delBtn" @click="delPrice(index)">删除</span>
          </div>
          <el-button
            @click="addPrice()"
            type="primary"
            style="margin-left: 128px; margin-top: 10px"
            >添加新区间价格</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      sceid: "",
      scenicSpotOptions: [],
      scenicOptions: [],
      ticketTypeOptions: [
        {
          dictValue: 1,
          dictLabel: "成人票",
        },
        {
          dictValue: 2,
          dictLabel: "老人票",
        },
        {
          dictValue: 3,
          dictLabel: "儿童票",
        },
      ],
      visible: false,
      ticketId: "",
      dataForm: {
        id: "",
        ticketName: "",
        scenicSpotId: "",
        ticketType: "",
        realPrice: "",
        discountPrice: "",
        status: "",
        remark: "",
        scenicSpotName: "",
        spid: "",
        sid: "",
        menpiaoId: "",
        qudaoCode: "",
        secretKey: "",

        calendarList: [
          {
            startDate: "",
            endDate: "",
            price: "",
          },
        ],
      },
    };
  },
  created() {
    this.getScenicOptions();
  },
  mounted() {
    if (this.dataForm.sid) {
      this.getScenicPortOptions(this.dataForm.sid);
    }
  },
  watch: {
    "dataForm.sid": {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal) {
          this.getScenicPortOptions(newVal);
        }
      },
    },
    "dataForm.spid": {
      immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal) {
          this.dataForm.scenicSpotId = newVal;
        }
      },
    },
  },
  computed: {
    dataRule() {
      return {
        ticketName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        calendarList: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        ticketType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        spid: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        realPrice: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
        sid: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
      };
    },
  },
  methods: {
    addPrice() {
      this.dataForm.calendarList.push({
        startDate: "",
        endDate: "",
        price: "",
      });
    },
    delPrice(index) {
      if (this.dataForm.calendarList.length > 1) {
        this.dataForm.calendarList.splice(index, 1);
      }
    },
    getScenicPortOptions(sid) {
      this.$http
        .get("scenic/isscenicspot/selectScenicList/" + `${sid}`, {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicSpotOptions = res.data;
          }
        });
    },
    getScenicOptions() {
      this.$http.get("/scenic/isscenic/page", {}).then(({ data: res }) => {
        if (res.msg == "success") {
          this.scenicOptions = res.data.list;
        }
      });
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/isscenicticket/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.ticketId = res.data.id;
          this.dataForm.calendarList = this.dataForm.calendarList || [
            {
              startDate: "",
              endDate: "",
              price: "",
            },
          ];
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.dataForm.calendarList.forEach((element) => {
            element.ticketId = this.ticketId;
          });
          console.log(this.dataForm.calendarList);
          this.$http[!this.dataForm.id ? "post" : "put"](
            "/scenic/isscenicticket",
            this.dataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>
<style scoped lang="scss">
.pricesItem {
  display: flex;
  margin-left: 120px;
  .s1 {
    margin: 6px 10px;
  }
}
.delBtn {
  display: inline-block;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  background-color: #f36a6a;
  color: #fff;
  margin-top: 24px;
  border-radius: 4px;
}
</style>
